<!--
模版 template 包含了组件的HTML结构,h1标签显示了传入name属性值.{{name}}是vue插值语法,用于绑定数据
按钮绑定了一个点击事件 @click="sayHello",当按钮被点击时,会调用sayHello方法.
脚本
<script setup> 是vue3中的一种新的脚本编写方式,允许直接在script 标签内定义组件的逻辑,而不需要额外的选项对象.
import { ref } from 'vue';  导入了ref函数,虽然在这个例子中没有使用到ref,但它通常用于响应式的引用
defineProps() 函数用于定义组件接受的属性及其验证规则.在这个例子定义了一个名为name的属性,类型为字符串,并且是必填的.
sayHello() 方法是一个事件处理函数,当按钮被点击时,会调用alert函数显示一个hello消息.

样式
<style scoped> 标签包含了组件的css样式 ,并且这些样式只作用于当前组件, 这个例子中设置了一些基本的文本对齐和颜色以及按钮的外边距

-->

<template>
  <div class="greeting">
    <h1>Hello, {{ name }}!</h1>
    <button @click="sayHello">Say Hello</button>
  </div>
</template>

<script setup lang="ts">
// import { ref } from 'vue';
import { defineProps } from 'vue';

// 定义组件接收的属性
const props = defineProps({
  name: {
    type: String,
    required: true
  }
});

// 定义组件的方法
const sayHello = () => {
  alert(`Hello, ${props.name}!`);
};
</script>

<!--组件样式-->
<style scoped>.greeting {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}

button {
  margin-top: 1rem;
}
</style>
